<style lang="scss" scoped></style>
<template>

</template>

<script type="module" setup>
import {
  PerspectiveCamera,
  WebGLRenderer,
  Scene, AxesHelper,
  GridHelper,
  AmbientLight,
  PlaneGeometry,
  MeshPhysicalMaterial,
  Mesh,
  DoubleSide,
  CylinderGeometry,
  SpotLight
} from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import sf_1_archon from '../../../public/sf_1_archon.glb'

let scene, camera, renderer, grid, controls, spotLight

// 初始化场景
function initScene() {
  scene = new Scene()
}

// 初始化相机
function initCamera() {
  camera = new PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.set(4.25, 3.4, -4.5)
}

// 初始化渲染器
function initRenderer() {
  renderer = new WebGLRenderer({
    antialias: true
  })
  renderer.setSize(window.innerWidth, window.innerHeight)

  document.body.appendChild(renderer.domElement)
}

function initAxesHelper() {
  const axesHelper = new AxesHelper(5)
  scene.add(axesHelper)
}

function initOrbitControls() {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
}

// 绘制一个网格
function initGridHelper() {
  grid = new GridHelper(20, 40, 'red', 0xffffff)
  grid.material.opacity = 0.2
  grid.material.transparent = true
  scene.add(grid)
}

function loadCarModel() {
  new GLTFLoader().load(sf_1_archon, function (gltf) {
    const carModel = gltf.scene
    carModel.rotation.y = Math.PI
    carModel.translateY(1.3)
    scene.add(carModel)
  })
}

// 灯光
function initAmbientLight() {
  const ambientLight = new AmbientLight(0xffffff, 0.5)
  scene.add(ambientLight)
}

// 地板材质
function initFloor() {
  const floorGeometry = new PlaneGeometry(40, 40)
  const material = new MeshPhysicalMaterial({
    side: DoubleSide, // 双面绘制
    color: 0x808080, // 颜色
    metalness: 0, // 金属度 0 非金属
    roughness: 0.1 // 粗糙度 越小越光滑
  })
  const mesh = new Mesh(floorGeometry, material)
  mesh.rotation.x = Math.PI / 2
  scene.add(mesh)
}

// 聚光灯
function initSpotLight() {
  spotLight = new SpotLight(0xffffff, 600)

  spotLight.position.set(-5, 10, 1);
  spotLight.castShadow = true
  spotLight.shadow.mapSize.width = 4096;
  spotLight.shadow.mapSize.height = 4096;
  spotLight.distance = 30
  spotLight.penumbra = 0.2
  spotLight.decay = 2
  spotLight.shadow.radius = 10
  spotLight.target.position.set(0, 0, 0)

  scene.add(spotLight)
}

// 展厅周边(圆柱体)
function initCylinder() {
  const geometry = new CylinderGeometry(40, 40, 20, 60)
  const material = new MeshPhysicalMaterial({
    color: 0x6c6c6c,
    side: DoubleSide,
    metalness: 0,
    roughness: 0.1
  })
  const cylinder = new Mesh(geometry, material)
  scene.add(cylinder)
}

function init() {
  initScene()
  initCamera()
  initRenderer()
  initAxesHelper()
  initOrbitControls()
  // initGridHelper()
  loadCarModel()

  initAmbientLight()
  initFloor()
  initSpotLight()
  initCylinder()
}
init()

function render() {
  renderer.render(scene, camera)
  requestAnimationFrame(render)
  controls.update()
}
render()

// 监听视口改变
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})
</script>
